<template>
	<view class="storageDetails">
		<Login></Login>
		<view class="searchpage" style="padding: 66rpx 38rpx 0 40rpx; box-sizing: border-box">
			<div style="display: flex; justify-content: space-between;">
				<div class="searchpage-top">
					<text>{{list.boxName}}</text>
				</div>
				<div class="searchpage-top">
					大型
				</div>
				<div style="text-align: right; ">
					<button type="default" open-type="share"> 赠出 </button>
					<!-- <text class="text1" @click="giveBox">赠出</text> -->
					<button type="default" @click="toEmploy">编辑使用者</button>
				</div>
			</div>

			<view class="" style="width: 600rpx;display: flex;justify-content: space-between;box-sizing: border-box; padding-top: 42rpx; ">
				<swiper class="swiper" snap-to-edge="true" circular previous-margin="150rpx" next-margin="150rpx" navigation
				 :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<view class="swiper-item">
							<image :src=item mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="" style="margin-top: 60rpx; height: 70rpx; display: flex;justify-content: center;">
				<view class="look" style="">
					<text>一键查找</text>
				</view>
			</view>
			<view class="" style="margin-top: 40rpx;">
				<text class="icon iconfont icon-ditu-dibiao "></text>
				<text style="margin-left: 20rpx;font-weight: bold;color: #444444;">{{address}}</text>
			</view>
			<view class="" style="width: 335px;height: 28px;background: #FFFFFF;border-radius: 5px; display: flex;">
				<text style="testt">备注: </text><input type="text" placeholder="   这里是备注的地方" style="font-size: 20rpx;margin-top: 10rpx;" />
			</view>
			<view class="addfooter">
				<text>添加物品</text>
				<text class="icon1 iconfont icon-tianjia " @click="toNewly"></text>
			</view>

			<view class="goodsNum" v-for="(item,index) in goodsList" :key="index">
				<view class="goodsNum-left">
					<text>{{item.goodsName}}</text>
				</view>
				<view class="goodsNum-right">
					<text @click="toGoodsDetails(item)">查看图片</text>
					<text @click="toGoodsDetails(item)">编辑</text>
					<text @click="deleteItem(item)">删除</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Login from "../../common/login/login.vue"
	import BaseUrl from "../../utlis/api.js"

	export default {
		components: {
			Login
		},
		data() {
			return {
				list: [], //收纳箱数据
				bannerList: ["../../static/image/background.png"],
				goodsList: [], //物品数量
				giveUrlKey: "",
				address: ''
			}
		},
		onLoad(option) {
			if (option) {
				const params = JSON.parse(option.params)
				this.list = params;
				console.log(this.list)
				if (this.list.boxQrCode) {
					this.address = this.list.boxQrCode
				}

			}
			this.getGoodsList();
			this.getgiveUrlKey();
		},

		methods: {
			// 去新增物品页面
			toNewly() {
				const params = this.list.boxId
				uni.navigateTo({
					url: "../newly/newly?params=" + params
				})
			},
			getGoodsList() {
				const boxId = this.list.boxId
				// console.log(boxId)
				if (wx.getStorageSync("userInfo")) {
					const token = wx.getStorageSync('token') || [];
					uni.request({
						url: BaseUrl + "/wx/sbox/goods/list",
						method: 'GET',
						header: {
							"Authorization": "Bearer " + token,
						},
						data: {
							boxId: boxId
						},
						success: (res) => {
							console.log(res)
							this.goodsList = res.data.rows
							console.log(this.goodsList)
						}
					})
				}
			},
			toEmploy() {
				const boxId = this.list.boxId;
				uni.navigateTo({
					url: '/pages/employ/employ?boxId=' + boxId,
				})
			},
			deleteItem(v) {
				console.log(v)
				const goodsIds = v.goodsId
				const token = wx.getStorageSync('token') || [];
				uni.request({
					url: BaseUrl + "/wx/sbox/goods/" + goodsIds,
					method: 'DELETE',
					header: {
						"Authorization": "Bearer " + token,
					},
					success: (res) => {
						this.getGoodsList()
					}
				})
			},
			toGoodsDetails(value) {
				const params = value
				uni.navigateTo({
					url: "../goodsDetails/goodsDetails?params=" + JSON.stringify(params)
				})
			},
			// 获取key值
			getgiveUrlKey() {
				const boxId = this.list.boxId
				const token = wx.getStorageSync('token') || [];
				uni.request({
					url: BaseUrl + "/wx/sbox/box/giveUrlKey?boxId=" + boxId,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + token,
					},
					success: (res) => {
						this.giveUrlKey = res.data.msg
					}
				})
			},

		},
		onShareAppMessage: function() {
			const boxId = this.list.boxId
			const giveUrlKey = this.giveUrlKey
			return {
				title: '转发给好友',
				desc: '是否赠送盒子给好友',
				imageUrl: "",
				path: '/pages/index/index?boxId=' + boxId + '&giveUrlKey=' + giveUrlKey // 路径，传递参数到指定页面。
			}
		}
	}
</script>

<style>
	.storageDetails {
		width: 100%;
		height: 100%;
		background-color: #c3b18b;
	}

	.searchpage {
		width: 100%;
		height: 100%;
		background-color: #f9f7f2;
		border-radius: 20rpx;
	}

	.searchpage-top {
		width: 33%;
		height: 25px;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 26px;
		color: #000000;
		opacity: 0.7;
	}

	.text1 {
		width: 24px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.6;
		margin-right: 20rpx;
	}

	.text2 {
		width: 48px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.6;
	}

	.weui-cells {
		display: inline-block;
		width: 254px;
		height: 32px;
		border: 1px solid #000;
		opacity: 0.3;
		border-radius: 10px;
	}

	.mini-btn {
		width: 61px;
		height: 32px;
		margin-top: 70rpx;
		background: #ffcf00;
		opacity: 1;
		border-radius: 10px;
	}

	.whitebg {
		whitebgwidth: 120px;
		height: 40px;
		background: #fff;
		opacity: 0.9;
		border-radius: 10px;
		font-weight: 800;
		line-height: 52rpx;
		color: #000000;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 15rpx;
	}

	.swiper {
		width: 100%;
		height: 300rpx;
	}

	.look {
		width: 270rpx;
		height: 100%;
		background: #FFCF00;
		opacity: 1;
		border-radius: 36rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 70rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.icon {
		color: #FFCF00;
	}

	.icon1 {
		color: #707070;
		font-size: 60rpx;
	}

	.testt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 26px;
		color: #000000;
		opacity: 1;
	}

	.addfooter {
		width: 100%;
		height: 83rpx;
		border-top: 1px solid #DEDDD9;
		border-bottom: 1px solid #DEDDD9;
		margin-top: 24rpx;
		line-height: 83rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 32rpx;
	}

	.goodsNum {
		width: 100%;
		height: 83rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #DEDDD9;
		box-sizing: border-box;
		padding-left: 20rpx;
		line-height: 83rpx;
	}

	.goodsNum-right {
		width: 50%;
		display: flex;
		justify-content: space-between;
	}

	button {
		display: inline-block;
		padding: 10rpx;
		font-size: 24rpx;
		height: auto;
		background-color: #F9F7F2;
	}
</style>
